import { View, Text, StyleSheet } from "react-native";
import { ToastAndroid } from "react-native";
import type { ViewStyle, TextStyle, StyleProp } from "react-native";
import Toast, { BaseToast, ErrorToast, InfoToast } from "react-native-toast-message";
import type { BaseToastProps, ToastConfigParams, ToastProps } from "react-native-toast-message";
import commonStyle from "@/styles";
import theme from "@/styles/theme";
import FontIcon from "@/components/FontIcon";
import config from "@/config";

type StylesType = {
  containerStyle?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
};

/** 自定义消息提示 */
const customToastComp = (type: "success" | "error" | "warning", opt: ToastConfigParams<StylesType>) => {
  return (
    <View style={[styles.baseContainer, styles.messageContaienr, styles[type], opt.props.containerStyle]}>
      <FontIcon type={type} iconStyle={{ marginRight: 4 }} />
      <Text
        numberOfLines={2}
        lineBreakMode="tail"
        // @ts-ignore
        style={[styles.baseText, styles[type + "Text"], opt.props.textStyle]}
      >
        {opt.text1}
      </Text>
    </View>
  );
};

// toast 配置
const toastConfig = {
  // 默认提示
  info: (props: BaseToastProps) => <InfoToast {...props} />,

  ///// 自定义提示
  success: (opt: ToastConfigParams<StylesType>) => {
    return customToastComp("success", opt);
  },
  warning: (opt: ToastConfigParams<StylesType>) => {
    return customToastComp("warning", opt);
  },
  error: (opt: ToastConfigParams<StylesType>) => {
    return customToastComp("error", opt);
  },
  tip: (opt: ToastConfigParams<StylesType>) => {
    return (
      <View style={[styles.baseContainer, styles.tipContainer, commonStyle.shadow, opt.props.containerStyle]}>
        <Text numberOfLines={2} lineBreakMode="tail" style={[styles.baseText, opt.props.textStyle]}>
          {opt.text1}
        </Text>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  baseContainer: {
    padding: 14,
    paddingLeft: 18,
    paddingRight: 18,
    maxWidth: "70%",
    flexDirection: "row",
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center"
  },
  tipContainer: {
    borderRadius: 30,
    borderColor: "#ccc",
    borderWidth: 1,
    borderStyle: "solid"
  },
  baseText: {
    color: "#000",
    fontSize: 14
  },
  messageContaienr: {
    borderRadius: 4,
    borderWidth: 1,
    borderStyle: "solid"
  },
  success: {
    backgroundColor: "#f0f9eb",
    borderColor: "#e1f3d8"
  },
  successText: {
    color: theme.success
  },
  error: {
    backgroundColor: "#fef0f0",
    borderColor: "#fde2e2"
  },
  errorText: {
    color: theme.danger
  },
  warning: {
    backgroundColor: "#fdf6ec",
    borderColor: "#faecd8"
  },
  warningText: {
    color: theme.warn
  }
});

export type MessageOption = ToastProps & {
  /** 消息类型 */
  type: "success" | "error" | "warning" | "landToast" | "toastTip" | "toast";
  /** 消息内容 */
  message: string;
  /** 方向 */
  position?: "top" | "bottom";
  /** 容器样式, toast 类型的不支持, 其他的都支持 */
  containerStyle?: StyleProp<ViewStyle>;
  /** 偏移量 */
  offset?: number;
};

/** 通用消息提示组件 */
const defaultOffset = 150;
const showMessage = (opt: MessageOption) => {
  Toast.hide();
  const { type, message, position = "top", offset = 0, containerStyle, ...other } = opt;
  const topOffset = position === "top" ? defaultOffset : offset;
  const bottomOffset = position === "bottom" ? defaultOffset : offset;

  switch (type) {
    case "toast":
      if (position === "top") {
        ToastAndroid.showWithGravityAndOffset(message, ToastAndroid.SHORT, ToastAndroid.TOP, 0, topOffset);
      } else {
        ToastAndroid.showWithGravityAndOffset(message, ToastAndroid.SHORT, ToastAndroid.BOTTOM, 0, bottomOffset);
      }
      break;
    case "toastTip":
      Toast.show({
        type: "tip",
        text1: message,
        position,
        topOffset,
        bottomOffset,
        props: { containerStyle },
        ...other
      });
      break;
    case "landToast":
      Toast.show({
        type: "tip",
        text1: message,
        position,
        topOffset,
        bottomOffset,
        ...other,
        props: {
          containerStyle: [
            {
              transform: [{ rotate: "90deg" }]
            },
            containerStyle,
          ]
        }
      });
      break;
    default:
      Toast.show({
        type,
        text1: message,
        position,
        topOffset,
        bottomOffset,
        props: { containerStyle },
        ...other
      });
  }
};

/** 隐藏消息, toast 类型的不支持, 其他的都支持*/
const hideMessage = () => Toast.hide();

export default <Toast config={toastConfig} position="bottom" visibilityTime={config.messageVisibilityTime} topOffset={50} />;

export { showMessage, hideMessage };
